<template>
  <el-card shadow="never" class="portal-eChart-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}{{ subTitle }}</span>
      <div style="width: 80px;position: absolute;  top: 13px;    z-index: 10000;   right: 65px;">
        <el-select v-model="value" placeholder="请选择" @change="handleChangeData">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="eChart-box-body">
      <div ref="regionChart" id="chart" v-show="!isEmpty"></div>
      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img" />
        <p class="noData-txt">暂无数据</p>
      </div>
    </div>
  </el-card>
</template>
<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
import { getReportPie } from '@/api/home'
export default {
  mixins: [resize],
  props: {
    title: { type: String, default: '' },
    option: { type: Object, default: () => {} },
    propsApi: '',
    subTitle: ''
  },
  data() {
    return {
      chart: null,
      currOption: {},
      isEmpty: true,
      activeName: 'regionChart',
      options: [
        {
          value: '1',
          label: '本周'
        },
        {
          value: '2',
          label: '本月'
        },
        {
          value: '3',
          label: '本年'
        }
      ],
      value: '3'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleChangeData() {
      this.getData()
    },
    timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done')
      })
    },
    getData() {
      getReportPie(this.propsApi, this.value).then(res => {
        if (res.data.length == 0) {
          this.isEmpty = true
        }
        res.data.sort((a, b) => a.value - b.value)
        this.currOption = {
          // title: [
          //   {
          //     text: this.title,
          //     x: 'left',
          //     textStyle: {
          //       // 主标题文本样式
          //       color: '#76757d', // 标题颜色，这里设置为红色
          //       fontSize: 22 // 标题字体大小，这里设置为20
          //     }
          //   },
          //   {
          //     text: this.subTitle,
          //     x: 'left',
          //     textStyle: {
          //       fontSize: 12, // 副标题字体大小
          //       color: '#908f8f', // 副标题颜色,
          //       fontWeight: 'normal'
          //     },
          //     left: '85',
          //     top: '6'
          //   }
          // ],
          // legend: {
          //   orient: 'horizontal', // 图例列表的布局朝向
          //   left: 'center', // 图例组件离容器左侧的距离
          //   top: 'bottom', // 将图例放置在底部
          // },
          tooltip: {
            trigger: 'item'
          },
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {
                // 保存为图片
                show: true,
                title: '下载',
                type: 'png',
                lang: ['点击下载']
              },
              dataView: {
                // 数据视图工具，可以取消显示
                show: false,
                title: '数据视图',
                lang: ['数据视图', '关闭', '刷新']
              },
              magicType: {
                // 动态类型切换，可以取消显示
                show: false,
                title: {
                  line: '折线图',
                  bar: '柱状图',
                  stack: '堆叠',
                  tiled: '平铺'
                },
                lang: ['切换']
              },
              restore: {
                // 配置项还原
                show: false,
                title: '还原'
              }
            }
          },
          calculable: true,
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              // data: [{ value: 1, name: '贝尔安亲' }, { value: 2, name: '贝尔优能' }, { value: 3, name: '贝尔全能' }],
              data: res.data,
              roseType: 'area', // 设置为南丁格尔玫瑰图
              hoverAnimation: false, // 设置为 false 以默认高亮显示
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'outside', // 标签显示位置
                  formatter: '{b}: {c} ({d}%)' // 自定义标签内容，显示名称、数值和百分比
                }
              },
              color: ['#1aacfd', '#71eae0', '#5470c6', '#91cc75', '#fac858', '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            }
          ]
        }
        this.resetChart()
      })
    },
    initChart(refs) {
      let ref = refs ? refs : this.$refs.regionChart
      
      if (!ref) {
        console.warn('Chart container element not found')
        return
      }
      
      this.chart = echarts.init(ref)
      this.chart.setOption(this.currOption)
      setTimeout(() => {
        this.$nextTick(() => {
          if (this.chart) {
            this.chart.resize()
          }
        })
      }, 50)
    },
    resetChart() {
      this.isEmpty = JSON.stringify(this.currOption) === '{}'
      this.chart && this.chart.dispose()
      this.chart = null
      if (!this.isEmpty) this.initChart()
    }
  },
  beforeDestroy() {
    if (!this.chart) return
    this.chart.dispose()
    this.chart = null
  }
}
</script>
<style lang="scss">
.eChart-box-body {
  .el-input {
    input {
      border-radius: 20px;
    }
  }
}
</style>
